<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
</head>
<body>


    <script>
        // 面向对象
            // 在ES5中这种编码方式没有统一的写法  (属性和方法)
            // 在ES6中才统一写法 (class) 

        // 三大特点:    
            // 封装性
            // 继承性
            // 多态性 

        // 继承性:
            // 1.0 原型
            // 2.0 bind  call   apply 

        // _this 和 _self  和 that 可以用做变量的名称

        // 直接量
        // 1.0 bind  
        var a = {say: function(){ console.log("颜色:"+this.color) }}
        // a.say();
        var b = {color:"red" }
        // 改变this指向 (say方法作用域this指向了b对象)
        // a.say.bind(b)();
        // a.say.bind(b)(参数1,参数2);
        // bind()
        // 调用者: 方法/函数
        // 参数: 目标对象
        // 返回值: 方法
        // 功能: 改变原对象方法作用域中this指向(用b对象替换了a对象)
        

        // 2.0 call
        var _self ;// 定义变量,用于记录say作用域的this
        // x 对象
        var x = {
            color:"red",
            say: function(width,height) {// 作用域
                console.log("颜色:" + this.color+"宽度:"+width+"高度:"+height);
                _self = this;// 记录当前函数作用域的this
            }
        }
        // x.say();
        // console.log(_self === x);// true

        // y 对象
        var y = {
            color: "green"
        }
        
        // 改变this之前
        // y.say();// 报错
        // console.log(y.color);// undefined

        // 改变this之后
        // x.say.call(y, "100px","120px");//单一传参
        // console.log(_self === y);// true

        // call
        // 调用者: 方法/函数
        // 参数: 参数1 目标对象, 参数2,  参数3
        // 返回值: undefined (直接忽略)
        // 功能: 改变原对象方法作用域中this指向(用y对象替换了x对象)


        // 3.0 apply
        // 声明一个变量,用于记录say方法作用域的 this
        var that ;
        // m 对象
        var m = {
            color: "yellow",
            say: function(width,height) {// 作用域
                console.log("颜色: " + this.color+";宽度:"+width+";高度:"+height);
                that = this;// 记录当前作用域的this
            }
        }
        // m.say();
        // console.log(that === m);//true
       

        // n 对象
        var n = {
            color: "blue"
        }

        // 改变this之前
        // n.say();// 报错
        // console.log(that === n);//false

        // 改变this之后
        m.say.apply(n, ["100px","120px"]);//参数1:目标对象  参数2: 数组
        console.log(that === n); // true

        // apply
        // 调用者: 方法/函数
        // 参数: 1:目标对象  2: 数组(和方法的形参一一对应)
        // 返回值: 忽略
        // 功能: 改变原对象方法作用域中this指向(用n对象替换了m对象)


        





    </script>
</body>
</html>